<!--
功能：基础详情
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2024-01-02 16:57:56
-->
<template>
  <div>
    <PageDetail :pageDetailData="pageDetailData" :pageDetailOptions="pageDetailOptions">
      <!-- 自定义任务栏 -->
      <template #taskList="{ content }">
        <div style="margin-top: 10px;">
          <vxe-table
            border
            size="mini"
            :column-config="{ resizable: true }"
            :tree-config="{ accordion: true }"
            :data="content ? content.taskList : []"
          >
            <vxe-column type="seq" width="50" align="center"></vxe-column>
            <vxe-column field="operName" title="操作账号" width="100"></vxe-column>
            <vxe-column field="title" title="操作内容" width="200"></vxe-column>
            <vxe-column field="operTime" title="操作时间" width="150"></vxe-column>
            <vxe-column field="operIP" title="操作IP" width="150"></vxe-column>
            <vxe-column field="operLocation" title="操作地址" width="200"></vxe-column>
            <vxe-column field="requestMethod" title="请求方式" width="100"></vxe-column>
            <vxe-column field="operParam" title="请求参数" width="200"></vxe-column>
            <vxe-column field="operUrl" title="请求路径" width="200"></vxe-column>
            <vxe-column field="jsonResult" title="返回接口" min-width="200"></vxe-column>
          </vxe-table>
        </div>
      </template>
      <!-- 自定义操作栏 -->
      <template #operation="{ content }">
        <a-button>停用账号</a-button>
        <a-button type="primary" style="margin-left: 8px" @click="handleAddTask(content)"
          >分配任务</a-button
        >
      </template>
    </PageDetail>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { getUserDetail } from '@/api/modules/organization.js'
const pageDetailOptions = reactive({
  title: '数据详情', // 头部标题
  subTitle: '个人基础信息，企业信息，认证信息展示', // 头部副标题
  showPageTitle: true, // 是否显示页面头部
  showPageOperation: true, // 是否显示页面操作
  configData: [
    // 配置数据（二维数组）
    [
      {
        field: '', // 列字段名
        title: '基础信息', // 标题
        span: 24, // 栅格占据的列数
        type: 'title', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'name', // 列字段名
        title: '姓名', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'username', // 列字段名
        title: '用户名', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'avatar', // 列字段名
        title: '头像', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'sex', // 列字段名
        title: '性别', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'status', // 列字段名
        title: '状态', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'birthday', // 列字段名
        title: '生日', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'mobile', // 列字段名
        title: '手机号码', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'email', // 列字段名
        title: '邮箱', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      }
    ],
    [
      {
        field: '', // 列字段名
        title: '企业信息', // 标题
        span: 24, // 栅格占据的列数
        type: 'title', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'companyName', // 列字段名
        title: '公司', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'departmentName', // 列字段名
        title: '部门', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'dutyName', // 列字段名
        title: '职务', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'supervisorName', // 列字段名
        title: '主管', // 标题
        span: 6, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'address', // 列字段名
        title: '地址', // 标题
        span: 12, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'descript', // 列字段名
        title: '描述信息', // 标题
        span: 12, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      }
    ],
    [
      {
        field: '', // 列字段名
        title: '任务列表', // 标题
        span: 24, // 栅格占据的列数
        type: 'title', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: false // 是否使用插槽（使用插槽时，value值无效，具名为field）
      },
      {
        field: 'taskList', // 列字段名
        title: '任务列表', // 标题
        span: 24, // 栅格占据的列数
        type: 'item', // 类型（item：字段；title：标题；）
        className: '', // 自定义类名
        slots: true // 是否使用插槽（使用插槽时，value值无效，具名为field）
      }
    ]
  ]
})
// 添加任务
const handleAddTask = (event) => {
  console.log('添加任务', event)
}
// 详情数据
const pageDetailData = ref(null)
// 获取用户信息
const getDataDetail = () => {
  getUserDetail().then((res) => {
    console.log(res)
    const { code, data } = res
    if (code == 200) {
      pageDetailData.value = data
    }
  })
}
getDataDetail()
</script>
<style lang="scss" scoped></style>
